<template>
  <div class="JNPF-common-layout">
    <div class="JNPF-common-layout-center">
        <el-row class="JNPF-common-search-box" :gutter="16">
          <el-form @submit.native.prevent>
            <el-col :span="6">
              <el-form-item label="防区名称">
                <el-input v-model="query.fqmc" placeholder="防区名称" clearable  />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item>
                <el-button type="primary" icon="el-icon-search" @click="search()">查询</el-button>
                <el-button icon="el-icon-refresh-right" @click="reset()">重置</el-button>
              </el-form-item>
            </el-col>
          </el-form>
        </el-row>
        <div class="JNPF-common-layout-main JNPF-flex-main">
      <div class="JNPF-common-head">
        <div>
          <el-button type="primary" icon="el-icon-plus" @click="addOrUpdateHandle()">
            新增
          </el-button>
          <el-button type="text" icon="el-icon-download" @click="exportData()">
            导出
          </el-button>
        </div>
        <div class="JNPF-common-head-right">
          <el-tooltip effect="dark" content="刷新" placement="top">
            <el-link icon="icon-ym icon-ym-Refresh JNPF-common-head-icon" :underline="false"  @click="reset()" />
          </el-tooltip>
          <screenfull :isContainer="true" />
          <el-tooltip effect="dark" content="列设置" placement="top">
            <el-link icon="icon-ym icon-ym-options JNPF-common-head-icon" :underline="false" />
          </el-tooltip>
        </div>
      </div>
      <JNPF-table v-loading="listLoading" :data="list">
        <el-table-column prop="fqbh" label="防区编号" align="left" />
        <el-table-column prop="fqmc" label="防区名称" align="left" />
        <el-table-column prop="szqy" label="所在区域" align="left" />
        <!-- 三维坐标 -->
        <el-table-column prop="position" label="三维坐标" align="left" />
        <el-table-column prop="mjdip" label="门禁点IP及端口号" align="left" />
        <el-table-column label="所属单位"  prop="ssdw" algin="left">
          <template slot-scope="scope">{{ scope.row.ssdw | dynamicText(ssdwOptions) }}</template>
        </el-table-column>
        <el-table-column prop="fqlx" label="防区类型" align="left" />
        <el-table-column label="操作" fixed="right" width="200">
          <template slot-scope="scope">
             <el-button type="text" @click="addOrUpdateHandle(scope.row.id)" >
                编辑
              </el-button>
             <el-button type="text" @click="handleDel(scope.row.id)" class="JNPF-table-delBtn">
                删除
             </el-button>
             <el-button type="text" @click="addOrUpdateHandle(scope.row.id,true)" >
                详情
             </el-button>
             <el-button type="text" @click="record(scope.row)" >
                报警记录
             </el-button>
         </template>
        </el-table-column>
      </JNPF-table>
      <pagination :total="total" :page.sync="listQuery.currentPage" :limit.sync="listQuery.pageSize" @pagination="initData" />
    </div>
    </div>
    <JNPF-Form v-if="formVisible" ref="JNPFForm" @refresh="refresh" />
    <ExportBox v-if="exportBoxVisible" ref="ExportBox" @download="download" />
    <Record v-if="recordVisible" ref="record" />
  </div>
</template>

<script>
  import request from '@/utils/request'
  import {getDictionaryDataSelector} from '@/api/systemData/dictionary'
  import JNPFForm from './Form'
  import ExportBox from './ExportBox'
  import Record from './record'
  import {previewDataInterface} from '@/api/systemData/dataInterface'
export default {
  name:'scryDzwlqygl',
  data() {
    return {
      showAll: false,
      query: {
        fqmc:undefined,
      },
      defaultProps: {
        children: 'children',
        label: 'fullName'
      },
      list: [],
      listLoading: true,
      total: 0,
      listQuery: {
        currentPage: 1,
        pageSize: 20,
        sort: "desc",
        sidx: "",
      },
      formVisible: false,
      exportBoxVisible: false,
      recordVisible:false,
      columnList: [
        {prop: 'fqbh', label: '防区编号'},
        {prop: 'fqmc', label: '防区名称'},
        {prop: 'szqy', label: '所在区域'},
        {prop: 'mjdip', label: '门禁点IP及端口号'},
        {prop: 'ssdw', label: '所属单位'},
        {prop: 'fqlx', label: '防区类型'},
        {prop: 'position', label: '三维坐标'},
      ],
      ssdwOptions:[],
    }
  },
  components: {JNPFForm, ExportBox, Record},
  created() {
    this.initData();
    this.getssdwOptions();
  },
  methods: {
    getssdwOptions() {
      previewDataInterface('772d2cbcadd24df79243e3d92ef5f690').then(res => {
        this.ssdwOptions = res.data
      })
    },
    initData() {
      this.listLoading = true;
      let query = {
        ...this.listQuery,
        ...this.query
      };
      request({
        url: `/api/System/scryDzwlqygl`,
        method: 'get',
        dataType: 'jsonp',
        data: query
      }).then(res => {
          this.list = res.data.list
          this.total = res.data.pagination.total
          this.listLoading = false
          this.$nextTick(() => {
            this.tableHeight = "100%"
          });
      })
    },
    handleDel(id) {
      this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
          type: 'warning'
        }).then(() => {
          request({
            url: `/api/System/scryDzwlqygl/${id}`,
            method: 'DELETE'
            }).then(res => {
              this.$message({
                type: 'success',
                message: res.msg,
                onClose: () => {
                  this.initData()
                }
              });
            })
        }).catch(() => {});
    },
    addOrUpdateHandle(id,isDetail) {
      this.formVisible = true
      this.$nextTick(() => {
        this.$refs.JNPFForm.init(id,isDetail)
      })
    },
    exportData() {
      this.exportBoxVisible = true
      this.$nextTick(() => {
        this.$refs.ExportBox.init(this.columnList)
      })
    },
    download(data) {
      let query = {...data, ...this.listQuery, ...this.query}
      request({
        url: `/api/System/scryDzwlqygl/Actions/Export`,
        method: 'POST',
        data: query
      }).then(res => {
        if (!res.data.url) return
        window.open(this.define.comUrl + res.data.url)
        // window.location.href = this.define.comUrl + res.data.url
        this.$refs.ExportBox.visible = false
        this.exportBoxVisible = false
      })
    },
    search() {
      this.listQuery = {
        currentPage: 1,
        pageSize: 20,
        sort: "desc",
        sidx: "",
      }
      this.initData()
    },
    refresh(isrRefresh) {
      this.formVisible = false
      if (isrRefresh) this.reset()
    },
    reset() {
      for (let key in this.query) {
        this.query[key] = undefined
      }
      this.listQuery = {
        currentPage: 1,
        pageSize: 20,
        sort: "desc",
        sidx: "",
      }
      this.initData()
    },
    // 报警记录
    record(row) {
      this.fqbh = row.fqbh
      // 跳到弹窗
      this.recordVisible = true
      this.$nextTick(() => {
        this.$refs['record'].initRecord(this.fqbh)
      })
    }
  }
}
</script>

<style>

</style>